<template>
  <el-dialog
    :close-on-click-modal="false"
    title="批量设置规格"
    :visible="show"
    :before-close="cancel"
    width="90vw"
    destory-on-close
    center
  >
    <el-row
      style="margin-bottom: 10px;"
      type="flex"
      justify="space-between"
      align="middle"
    >
      <el-row type="flex" style="flex: 1;" :gutter="10">
        <el-col :span="5">
          <el-input clearable v-model="specName" placeholder="请输入规格名"></el-input>
        </el-col>
        <el-col :span="5">
          <el-input clearable v-model="specUnit" placeholder="请输入规格单位"></el-input>
        </el-col>
        <el-col :span="5">
          <el-input clearable v-model="specDesc" placeholder="请输入规格描述"></el-input>
        </el-col>
      </el-row>

      <el-button
        type="success"
        plain
        circle
        icon="el-icon-plus"
        @click="list.push($options.data().list[0])"
      ></el-button>
    </el-row>
    <el-table :data="list"   max-height="700px">
      <el-table-column
        label="操作"
        align="center"
        width="100"

        v-if="list.length > 1"
      >
        <template slot-scope="{ row, $index }">
          <el-button
            type="danger"
            plain
            icon="el-icon-minus"
            circle
            @click="list.splice($index, 1)"
          ></el-button>
        </template>
      </el-table-column>
      <el-table-column label="规格值" align="center" width="200">
        <template slot-scope="{ row }">
          <el-input v-model="row.specVal"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="规格类型" align="center" width="160">
        <template slot-scope="{ row }">
          <el-select
            v-model="row.type"
            placeholder="请选择规格类型"
            @change="handleTypeChange"
          >
            <el-option label="新规格" :value="1"></el-option>
            <el-option label="原规格 * 比例" :value="2"></el-option>
            <el-option label="原规格 +- 改价" :value="3"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="价格比例" align="center" width="140">
        <template slot-scope="{ row }">
          <el-input
            v-if="row.type == 2"
            v-model="row.proportion"
            v-maxnum="{ obj: row, key: 'proportion', length: 2, max: 100 }"
          >
            <span slot="suffix" style="line-height: 32px;">%</span>
          </el-input>
          <span v-else>#</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="190">
        <template slot-scope="{ row }">
          <el-input
            v-if="row.type == 1 || row.type==3"
            type="number"
            v-model.number="row.price"
            v-maxnum="{ obj: row, key: 'price', length: 2 }"
          >
          </el-input>
          <span v-else>#</span>
        </template>
        <template slot="header" slot-scope="scope">
          <div>
            平台原价(元)
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover"
              content="复制该列第一行的值至所有行。"
            >
              <el-button
                class="copy"
                slot="reference"
                @click="handleCopy('price')"
                type="danger"
                size="mini"
                >复制</el-button
              >
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="salePrice" width="190">
        <template slot-scope="{ row }">
          <el-input
            v-if="row.type == 1 || row.type==3"
            type="number"
            v-model.number="row.salePrice"
            v-maxnum="{ obj: row, key: 'salePrice', length: 2 }"
          >
          </el-input>
          <span v-else>#</span>
        </template>
        <template slot="header" slot-scope="scope">
          <div>
            平台售价(元)
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover"
              content="复制该列第一行的值至所有行。"
            >
              <el-button
                class="copy"
                slot="reference"
                @click="handleCopy('salePrice')"
                type="danger"
                size="mini"
                >复制</el-button
              >
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="marketPrice"
        label="商户原价(元)"
        width="190"
      >
        <template slot-scope="{ row }">
          <el-input
            v-if="row.type == 1 || row.type==3"
            type="number"
            v-model.number="row.marketPrice"
            v-maxnum="{ obj: row, key: 'marketPrice', length: 2 }"
            @blur="handleMarketPriceBlur(row)"
          >
          </el-input>
          <span v-else>#</span>
        </template>
        <template slot="header" slot-scope="scope">
          <div>
            商户原价(元)
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover"
              content="复制该列第一行的值至所有行。"
            >
              <el-button
                class="copy"
                slot="reference"
                @click="handleCopy('marketPrice')"
                type="danger"
                size="mini"
                >复制</el-button
              >
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="discount"
        label="商户折扣比例"
        width="190"
      >
        <template slot-scope="{ row }">
          <el-input
            v-if="row.type == 1"
            type="number"
            v-model.number="row.discount"
            v-maxnum="{ obj: row, key: 'discount', length: 2, max: 100 }"
            @blur="handleDiscountBlur(row)"
          >
            <span slot="suffix" style="line-height: 40px;">%</span>
          </el-input>
          <span v-else>#</span>
        </template>
        <template slot="header" slot-scope="scope">
          <div>
            商户折扣比例
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover"
              content="复制该列第一行的值至所有行。"
            >
              <el-button
                class="copy"
                slot="reference"
                @click="handleCopy('discount')"
                type="danger"
                size="mini"
                >复制</el-button
              >
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="costPrice"
        label="成本价(元)"
        width="190"
      >
        <template slot-scope="{ row }">
          <el-input
            v-if="row.type == 1 || row.type==3"
            type="number"
            v-model.number="row.costPrice"
            v-maxnum="{ obj: row, key: 'costPrice', length: 2 }"
            @blur="handleCostBlur(row)"
          >
          </el-input>
          <span v-else>#</span>
        </template>
        <template slot="header" slot-scope="scope">
          <div>
            成本价(元)
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover"
              content="复制该列第一行的值至所有行。"
            >
              <el-button
                class="copy"
                slot="reference"
                @click="handleCopy('costPrice')"
                type="danger"
                size="mini"
                >复制</el-button
              >
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="packageFee"
        label="包装费(元)"
        width="190"
      >
        <template slot-scope="{ row }">
          <el-input
            v-if="row.type == 1 || row.type==3"
            type="number"
            v-model="row.packageFee"
            v-maxnum="{ obj: row, key: 'packageFee', length: 2 }"
          >
          </el-input>
          <span v-else>#</span>
        </template>
        <template slot="header" slot-scope="scope">
          <div>
            包装费(元)
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover"
              content="复制该列第一行的值至所有行。"
            >
              <el-button
                class="copy"
                slot="reference"
                @click="handleCopy('packageFee')"
                type="danger"
                size="mini"
                >复制</el-button
              >
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="packageDiscount"
        label="包装费折扣比例"
        width="190"
      >
        <template slot-scope="{ row }">
          <el-input
            v-if="row.type == 1"
            type="number"
            v-model.number="row.packageDiscount"
            v-maxnum="{ obj: row, key: 'packageDiscount', length: 2, max: 100 }"
          >
            <span slot="suffix" style="line-height: 32px;">%</span>
          </el-input>
          <span v-else>#</span>
        </template>
        <template slot="header" slot-scope="scope">
          <div>
            包装费折扣比例
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover"
              content="复制该列第一行的值至所有行。"
            >
              <el-button
                class="copy"
                slot="reference"
                @click="handleCopy('packageDiscount')"
                type="danger"
                size="mini"
                >复制</el-button
              >
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" width="120">
        <template slot-scope="{ row }">
          <el-input
            v-model="row.stock"
            v-maxnum="{ obj: row, key: 'stock' }"
          ></el-input>
        </template>
        <template slot="header" slot-scope="scope">
          <div>
            库存
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover"
              content="复制该列第一行的值至所有行。"
            >
              <el-button
                class="copy"
                slot="reference"
                @click="handleCopy('stock')"
                type="danger"
                size="mini"
                >复制</el-button
              >
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="主图" width="170">
        <template slot-scope="{ row, $index }">
          <upload-img
            :index="$index"
            class="upload-img"
            @uploadFileList="getFileUrl"
            :folder="folder"
          >
            <img width="100%" v-if="row.mainImg" :src="row.mainImg" alt="" />
            <i v-if="!row.mainImg" class="el-icon-plus"></i>
          </upload-img>
        </template>
        <template slot="header" slot-scope="scope">
          <div>
            主图
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover"
              content="复制该列第一行的值至所有行。"
            >
              <el-button
                class="copy"
                slot="reference"
                @click="handleCopy('mainImg')"
                type="danger"
                size="mini"
                >复制</el-button
              >
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="图片" width="250">
        <template slot-scope="{ row, $index }">
          <div class="more-img__container">
            <div
              class="more-img"
              v-for="(item, index) in row.moreImg"
              :key="index"
            >
              <el-image :src="item" fit="cover" :preview-src-list="row.moreImg"> </el-image>
              <span
                class="el-icon-close"
                @click="row.moreImg.splice(index, 1)"
              ></span>
            </div>
            <upload-img
              v-show="row.moreImg.length != 5"
              :index="$index"
              :param="{ moreImg: true }"
              :limit="5 - row.moreImg.length"
              class="upload-img more-img__upload"
              @uploadFileList="getFileUrl"
              :folder="folder"
            >
              <i class="el-icon-plus"></i>
            </upload-img>
          </div>
        </template>
        <template slot="header" slot-scope="scope">
          <div>
            更多图片
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover"
              content="复制该列第一行的值至所有行。"
            >
              <el-button
                class="copy"
                slot="reference"
                @click="handleCopy('moreImg')"
                type="danger"
                size="mini"
                >复制</el-button
              >
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="简介"
        class="introduce"
        width="200"
      >
        <template slot-scope="{ row }">
          <el-input type="textarea" v-model="row.introduce"></el-input>
        </template>
        <template slot="header" slot-scope="scope">
          <div>
            简介
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover"
              content="复制该列第一行的值至所有行。"
            >
              <el-button
                class="copy"
                slot="reference"
                @click="handleCopy('introduce')"
                type="danger"
                size="mini"
                >复制</el-button
              >
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="默认" :width="150">
        <template slot-scope="{ row }">
          <el-button
            class="def-btn"
            size="mini"
            plain
            v-show="row.defaultFlag"
            type="danger"
            >默认值</el-button
          >
          <el-button
            class="def-btn"
            size="mini"
            plain
            @click="handleSetDefault(row)"
            v-show="!row.defaultFlag"
            type="info"
            >设为默认</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer">
      <el-button type="primary" @click="confirm">确定</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import UploadImg from "../../../components/UploadImg.vue";
export default {
  props: {
    // ids: {},
    show: {
      type: Boolean
    },
    folder: {
      type: String,
      default: "serverImg"
    }
  },
  data() {
    return {
      list: [
        {
          specVal: "",
          type: 1,
          proportion: "",
          price: "",
          salePrice: "",
          stock: "",
          costPrice: "",
          packageFee: "",
          discount: "",
          packageDiscount: "",
          marketPrice: "",
          introduce: "",
          mainImg: "",
          moreImg: [],
          defaultFlag: 0
        }
      ],
      specName: "",
      specUnit: "",
      specDesc: ""
    };
  },
  components: {
    UploadImg
  },
  methods: {
    handleTypeChange(row) {
      const params = {
        price: "",
        salePrice: "",
        costPrice: "",
        discount: "",
        marketPrice: "",
        packageFee: "",
        packageDiscount: "",
        proportion:"",
      };
      Object.assign(row, params);
    },
    // 复制第一行的库存到下面的所有库存呢
    handleCopy(prop) {
      const bool = [
        "packageDiscount",
        "packageFee",
        "marketPrice",
        "discount",
        "costPrice",
        "price",
        "salePrice"
      ].includes(prop);
      this.list.forEach(item => {
        if (bool && item.type == 2) return;
        if((prop=='packageDiscount'||prop=='discount')&&item.type==3) return
        item[prop] = this.list[0][prop];
        if (prop === "moreImg") {
          item.moreImg = JSON.parse(JSON.stringify(this.list[0].moreImg));
        }
      });
    },
    // 商户原价改变
    handleMarketPriceBlur(row) {
      const { marketPrice, discount, costPrice,type } = row;
      if(type==3) return
      if (costPrice && marketPrice && costPrice > marketPrice) {
        row.marketPrice = "";
        row.discount = "";
        this.$message.error("商户原价不能小于成本价");
        return;
      }
      row.costPrice = parseFloat(((marketPrice * discount) / 100).toFixed(2));
    },
    // 商户折扣比例改变
    handleDiscountBlur(row) {
      const { marketPrice, discount } = row;
      row.costPrice = parseFloat(((marketPrice * discount) / 100).toFixed(2));
    },
    handleCostBlur(row) {
      const { costPrice, marketPrice,type } = row;
      if(type==3) return
      if (costPrice == 0) {
        return;
      }
      if (costPrice && marketPrice && costPrice > marketPrice) {
        row.marketPrice = "";
        row.discount = "";
        this.$message.error("成本价不能大于商户原价");
        return;
      }
      row.discount = parseFloat(((costPrice / marketPrice) * 100).toFixed(2));
    },

    // 获取图片
    getFileUrl(val) {
      if (val) this.$Utils.notifySuccess("上传成功");
      const { index, param, uploadFileList } = val;
      if (param && param.moreImg) {
        this.list[index].moreImg.push(uploadFileList[0]);
      } else {
        this.list[index].mainImg = uploadFileList[0];
      }
    },
    handleSetDefault(row) {
      this.list.forEach(item => {
        item.defaultFlag = 0;
      });
      row.defaultFlag = 1;
    },
    checkData() {
      let defaultFlag = false;
      if (!this.specName) {
        this.$message.error("请输入规格名");
        return;
      }

      for (let item of this.list) {
        if (item.type == 1) {
          if (!String(item.price)) {
            this.$message.error("请输入平台原价");
            return;
          }
          if (!String(!item.salePrice)) {
            this.$message.error("请输入平台售价");
            return;
          }
          if (!String(item.discount)) {
            this.$message.error("请输入商户折扣比例");
            return
          }
          if (!String(item.marketPrice)) {
            this.$message.error("请输入商户原价");
            return;
          }
          if (!String(item.costPrice)) {
            this.$message.error("请输入成本价");
            return
          }
          if (!String(item.packageFee)) {
            this.$message.error("请输入包装费");
            return
          }
          if (!String(item.packageDiscount)) {
            this.$message.error("请输入包装费折扣比例");
            return
          }
        }else if(item.type==2){
            if(!String(item.proportion)){
                this.$message.error("请输入价格比例")
                return
            }
        }

        if (item.defaultFlag) defaultFlag = item.defaultFlag;
      }

      if (!defaultFlag) {
        this.$message.error("请设置默认规格");
        return;
      }
      return true;
    },
    cancel() {
      this.$emit("update:show", false);
    },
    confirm() {
      if (!this.checkData()) return;
      const { list, specName, specDesc, specUnit } = this;
      const specValList = list.map(item=>{
        return {
            ...item,
            moreImg:item.moreImg.toString(),
        }
      })

      this.$emit("confirm", { specValList, specName, specDesc, specUnit });
    }
  }
};
</script>

<style lang="scss" scoped>
.el-table{
    &::v-deep thead{
        .el-table__cell{
            button{
                padding: 3px;
                // width: 30px;
                // height: 20px;
            }
        }
    }
}
.upload-img {
  &::v-deep .el-upload {
    width: auto;
    .el-upload-dragger {
      width: 100px !important;
      height: 100px !important;
    }
  }

  .el-icon-plus {
    font-size: 24px;
    vertical-align: -24px;
  }
}
.more-img__container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .more-img {
    position: relative;

    width: 100px;
    margin-bottom: 5px;
    .el-image {
      width: 100px !important;
      height: 100px !important;
    }
    .el-icon-close {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
  .more-img__upload {
    width: fit-content;
    margin-bottom: 5px;
    &::v-deep .upload-oss {
      width: fit-content;
    }
  }
}
</style>
